<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>web09</title>
		<meta name="author" content="ch choongang" />
		<style>
			.colorRed{ color: red;}
			.colorBlue{ color: blue;}
			.larger{ font-size: larger;}
			.border{ border-width: 1px; 
					 border-style: solid;
					 border-color: black;
			}
		</style>
		<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
		<script>
			$(function(){
				$("h5").addClass("colorRed")
					   .addClass("larger")
				$("h5").removeClass("colorRed");
				// 아래의 문장은 addClass("colorRed")와 동
				//.addClass( function(index, currentClass))
				$("h5").addClass( function(index, currentClass) {
					console.log("index",index);
					console.log("currentClass",currentClass);
					if(index==0) return "colorRed";
					if(index==1) return "colorBlue";
				})
				// header selector
				$(":header").click(function(a,b){
					console.log("this clicked",this);
					// undefined : 없다는 뜻
					console.log("b",b);
					console.log("this clicked",this);
				})
				$('h5').removeClass(function(i,cc){
					console.log("i",i);
					console.log("cc",cc)
					// .indexOf("x")는 x의 위치를 return합니다
					// 만약 없으면 -1을 return합니다
					if(cc.indexOf("colorBlue")!=-1){
						return "colorBlue";
					}
					//있으면 true 없으면 false
					hasRed=$(this).hasClass("colorRed")
					console.log("hasRed",hasRed);
					if(hasRed){ //true면 실
						$(this).css("font-size","2em");
						return "colorRed";
					}else{
						$(this).css("font-size",".7em");
					}
				})
					
				$("h5").bind("click",function(){
					//클릭할때마다 클래스를 넣다 뺐다 합니다.
					//true: add만 되도록, false: remove만 되도
					$(this).toggleClass("colorRed",false)
				})
				// c는 옵션
				// $(seletor).action(a,b[,c]);
				$("h6").toggleClass(true);
				$("h6").click(function(){
					$(this).addClass("colorRed");
				})
				// .toggleClass( function(index, class, switch))
				$("h5").toggleClass( function(index,cls,s){
					//순서
					console.log("index",index);
					//현재 클래스
					console.log("cls",cls);
					//true, false 중 무엇이 걸려있는가
					console.log("s",s);
					if(s==true){return "colorBlue"}
					// colorRed 가 없으면 전부 colorRed로 된다
					// colorRed 가 있으면 없어진다
					return "colorRed";
				})
				var url = unescape(location.href);
				var position=url.indexOf("?");
				param=url.substring(position+1,url.length);
				console.log(""+param)
				$("h4").click(function(){
					$("h4").toggleClass("colorRed");
					//복사해보자--- 이동합니다.
					//$("h4").appendTo
					//.clone([withDataAndEvents])
					//변수가 object이면 $를 붙이는 경우가 많습니다.
					$clone=$(this).clone(true,true);
					$clone.appendTo("div");	
				})
				$("div").wrap("<hr/>");	//String
				// $("h4")의 clone을 생성해서 div를 감싼다
				$("div").wrap($("h4")); //Selector
				brObject=document.createElement("br");
				$("div").wrap("brObject");	//Object
				
				// .wrap( function(index))
				$("h5").wrap(function(index){
					console.log("h5 index",index);
					// h5를 나 자신으로 감싸라
					if(index==2) return this;
				});
				// 위에서 hr로 div를 감쌌는데 unwrap하자
				$("div").unwrap();
				$("div").unwrap();
				//각각의 h5를 모두 ".border"로 감싸기
				$("h5").wrapAll(".border");
				// h5들을 한꺼번에 ".border"로 감싸기
				$("h5").wrapAll(".border");
				// h4의 내용을 "<hr>"로 감싸라
				$("h4").wrapInner("<hr>");
				$("h4").wrapInner(function(index){
					if(index==2){ return "<br>"}
				})
				// insert시키는데 대상의 안쪽 끝으로 들어간다
				// .append( content [, content])
				$("div").append("<div>hello Div</div>"
					,"<div> good night </div>"
					,"<div> 잘자라 </div>");
				$("h6").append(function(index, html){
					console.log("index",index);
					console.log("html","원래 있던 문자열", html);
					if(index==0)
						return "<i> 이것을 어펜드!!</i>";
				});
				// .appendTo( target )
				// h6을 h4의 끝에 child로 insert
				$("h6").appendTo("h4");
				// 대상의 내용을 셋팅하기
				// 자주 쓰임
				var spanHtml=$("span").html();
				console.log("spanHtml",spanHtml);
				//.html( htmlString ) 대상의 내용을 셋팅하기
				$("b").html("b를 셋팅하기");
				// .text() 대상의 텍스트를 가져오기
				var spanText=$("span").text();
				console.log("spanText",spanText);
				//.text( htmlString )
				$("i").text("iiiii로 셋팅하기");
				// .text는 문자를 그대로 출력하고
				$("i").text("<b>로 <br> 셋팅하기");
				// .html은 문자를 오브젝트로 봅니다.
				$("i").html("<b>로 <br> 셋팅하기");
			})
		</script>
	</head>
	<body>
		<span> span
			<b> b bold</b>
		</span>
		<h4> h4 this will be toggle </h4>
		<h5> h5 </h5>
		<h5> h5 second </h5>
		<h5> h5 third </h5>
		<div class="border"> div </div>
		<h6> h6 </h6>
	</body>
</html>

